<script setup>
import { ref, onMounted } from "vue"

const ZH = 0b001;
const EN = 0b010;

const state = ref(ZH);

const show = () => {
    // en
    document.querySelectorAll('blockquote p').forEach(e => e.style.display = (state.value & EN) ? '' : 'none');
    // zh
    document.querySelectorAll('blockquote+p').forEach(e => e.style.display = (state.value & ZH) ? '' : 'none');
}
const zhHandler = () => {
    state.value ^= ZH;
    show();
}
const enHandler = () => {
    state.value ^= EN;
    show();
}

onMounted(show);

</script>

<template>
    <div class="container">
        <button class="switch_btn" @click="zhHandler">
            <div class="switch_icon" :class="{ 'active': state & ZH }">中文</div>
        </button>
        |
        <button class="switch_btn" @click="enHandler">
            <div class="switch_icon" :class="{ 'active': state & EN }">English</div>
        </button>
    </div>
</template>

<style scoped>
div.container {
    display: inline-flex;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 4px;
}

button.switch_btn {
    cursor: pointer;
}

.switch_icon {
    border-radius: 4px;
    padding: 0 4px;
    transition: all .2s;
}

.switch_icon.active {
    background-color: plum;
    font-weight: bold;
}
</style>